<mat-card>
  <mat-toolbar-row>
    <a [ixTest]="['cloudsync-task', 'open-in-new']" [routerLink]="['/data-protection', 'cloudsync']">
      <h3 class="card-title">
        {{ 'Cloud Sync Tasks' | translate }}
        <ix-icon name="open_in_new" class="title-icon"></ix-icon>
      </h3>
    </a>
    <div class="actions">
      <button
        *ixRequiresRoles="requiredRoles"
        mat-button
        [ixTest]="['cloudsync-task', 'add']"
        [attr.aria-label]="'Add Cloud Sync Task' | translate"
        (click)="onAdd()"
      >
        {{ 'Add' | translate }}
      </button>
    </div>
  </mat-toolbar-row>

  @if (!(dataProvider.currentPageCount$ | async) && !(dataProvider.isLoading$ | async)) {
    <ix-empty [conf]="emptyConfig"></ix-empty>
  } @else {
    <ix-table
      class="table"
      [ix-table-empty]="!(dataProvider.currentPageCount$ | async)"
      [emptyConfig]="emptyService.defaultEmptyConfig(dataProvider.emptyType$ | async)"
    >
      <thead
        ix-table-head
        [columns]="columns"
        [dataProvider]="dataProvider"
      ></thead>
      <tbody
        ix-table-body
        [columns]="columns"
        [dataProvider]="dataProvider"
        [isLoading]="!!(dataProvider.isLoading$ | async)"
      ></tbody>
    </ix-table>
  }
</mat-card>
